@import "header.html"
<link rel="stylesheet" href="../css/mobileSelect.css">
<link rel="stylesheet" href="../css/settle.css">

<body>
<header class="fxj-header" id="fxj-header">
        <span class="back" onclick="back();">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-jiantou"></use>
        </svg>
    </span>
    <h1 class="fxj-title">结算详情</h1>
</header>
<main id="main" style="margin-top: 65px;">
    <section v-show="view.main" class="pub_main pub_5rem" v-cloak>
        <h1 class="title big-title">收入结算</h1>
        <div class="mui-content">
            <ul class="mui-row marrow">
                <li class="mui-table-view-cell line-transverse infraCell">
                        <span class="span_left" data-value="5" id="chose_date" @click="show_can">{{data.date.year}}年{{data.date.month}}月
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-arrow-down"></use>
                        </svg>
                    </span>
                    <span class="span_right orange">本月收入：¥{{data.monthIncome||'0'}}</span>
                </li>

                <li class="mui-table-view-cell line-transverse infraCell settlecell" v-for="order in data.orderlist"
                    v-if="order.amount" @click="detailorder(order.orderId)">
                    <span class="se_span" style="font-size: medium">{{order.title}}</span><br><br>
                    <span class="se_span">订单号：{{order.orderId}}</span><span></span><br>
                    <span class="span_right bigright orange">￥{{order.amount}}</span>
                </li>
            </ul>
        </div>

        <div v-show="view.canlender" class="canlender">
            <div class="close-center">
                    <span @click="close_can">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cha-copy"></use>
                    </svg>
                </span>
            </div>
            <div class="title">
                <div class="center">
                        <span style="position: relative;left: -1rem;padding: 0.5rem" @click="subyear">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-jian"></use>
                        </svg>
                    </span>
                    <span>已选：<span style="color: orange">{{data.date.year}}</span>年 <span style="color: orange">{{data.date.month}}</span>月</span>
                    <span style="position: relative;left: 1rem;padding: 0.5rem" @click="addyear">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-jia3"></use>
                        </svg>
                    </span>
                </div>

            </div>
            <div class="month">
                <div>
                    <div @click="chouse_month(1)" :class='{ "hight":data.date.month===1}'><span>一  月</span></div>
                    <div @click="chouse_month(2)" :class='{ "hight":data.date.month===2}'><span>二 月</span></div>
                    <div @click="chouse_month(3)" :class='{ "hight":data.date.month===3}'><span>三 月</span></div>
                </div>
                <div>
                    <div @click="chouse_month(4)" :class='{ "hight":data.date.month===4}'><span>四  月</span></div>
                    <div @click="chouse_month(5)" :class='{ "hight":data.date.month===5}'><span>五 月</span></div>
                    <div @click="chouse_month(6)" :class='{ "hight":data.date.month===6}'><span>六 月</span></div>
                </div>
                <div>
                    <div @click="chouse_month(7)" :class='{ "hight":data.date.month===7}'><span>七  月</span></div>
                    <div @click="chouse_month(8)" :class='{ "hight":data.date.month===8}'><span>八 月</span></div>
                    <div @click="chouse_month(9)" :class='{ "hight":data.date.month===9}'><span>九 月</span></div>
                </div>
                <div>
                    <div @click="chouse_month(10)" :class='{ "hight":data.date.month===10}'><span>十  月</span></div>
                    <div @click="chouse_month(11)" :class='{ "hight":data.date.month===11}'><span>十一月</span></div>
                    <div @click="chouse_month(12)" :class='{ "hight":data.date.month===12}'><span>十二月</span></div>
                </div>
            </div>
        </div>
    </section>

    <section v-show="view.detail" class="pub_main " v-cloak>
        <div class="mui-content">
            <ul class="mui-row marrow margin_0">
                <li class="mui-table-view-cell infraCell settlecell " style="height: auto">
                    <span class="se_span bigfont">{{data.order.title}}</span><br>
                    <span class="se_span">订单号：{{data.order.oid}}</span><br>
                </li>
            </ul>
        </div>

        <div class="mui-content">
            <ul class="mui-table-view diulei">
                <li class="mui-table-view-cell mui-collapse detail-item">
                    <a class="mui-navigate-right" v-cloak>结算详情:{{data.payPrice}}</a>
                    <div class="mui-collapse-content">
                        <ul class="detail-group" v-if="data.list.length>0">
                            <li class="detail-item" :class="{'line-transverse':i<data.list-1}"
                                v-for="(order,i) of data.list">
                                <div class="item-date">
                                    <span v-cloak>{{order.start_date}}-{{order.end_date}}</span>
                                    <span v-text="order.status"></span>
                                </div>
                                <div>
                                    <span>订单总收入</span>
                                    <span v-cloak>¥{{order.amount}}</span>
                                </div>
                                <div class="small">
                                    <span class="tips">平台服务费</span>
                                    <span class="tips" v-cloak>- ¥{{order.commission}}</span>
                                </div>
                                <div v-if="order.status==='已结算'" class="small">
                                    <span class="tips">平台补贴</span>
                                    <span class="tips" v-cloak>+ ¥{{order.subsidy}}</span>
                                </div>
                                <div class="pt">
                                    <span>实际收入</span>
                                    <span class="highlight" v-cloak>¥{{(+order.amount) - (+order.commission) + (+order.subsidy)}}</span>
                                </div>
                                <div v-if="order.status==='已结算'" class="date-打款 small">
                                    <span v-cloak>打款日期: {{order.pay_date}}</span>
                                </div>
                            </li>
                        </ul>
                    </div>

                </li>
            </ul>
            <ul class="mui-row marrow">
                <li class="mui-table-view-cell infraCell settlecell">
                    <span class="se_span lit_grey"
                          style="font-size: 13px">到账时间由您设置的付款方式决定，支付宝为一个工作日到账，网银为1-7个工作日到账</span>
                </li>
                <li class="mui-table-view-cell infraCell ">
                    <span class="span_left">订单收入总计：</span>
                    <span class="span_right orange">￥{{data.order.income}}</span>
                </li>
            </ul>
        </div>

    </section>
</main>
@import "js.html"
<script src="../script/jquery.js"></script>
<script src="../script/mobileSelect.js"></script>
<script src="../script/settle.js"></script>
</body>

@import "footer.html"